<template>
<div id="students">
  <span>{{name}}</span>
  <span>{{age}}</span>
  <span>{{sex}}</span>
  <button >点击返回名称</button>
  <ul>
    <li v-for="item in studentsList" :key="item.id">
<!--      <router-link :to="`/school/info/${item.id}/${item.name}`">{{item.name}}</router-link>-->
      <router-link :to="{
        name:'info',
        params:{id:item.id,title:item.name}
      }">{{item.name}}</router-link>
    </li>
  </ul>
  <hr>
  <keep-alive include="Info">
    <router-view></router-view>
  </keep-alive>

</div>
</template>

<script>
/**
 * 功能: 让组件接收外部传过来的数据
 * - 传递数据   `<Students name="李四" ></Students>`
 * - 接收数据
 *   - props:['name']
 *   - 限制类型
 *    props:{
 *       name:String
 *     }
 *   - 显示类型,限制必要性,指定默认值
 * **备注** props是只读的,vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请
 * 复制props的内容到data中一份,然后修改data数据
 */
import {mount} from "../../minin";
export default {
  name: "Students",
  data(){
    return {
      studentsList:[
        {id:'001',name:'学生1'},
        {id:'002',name:'学生2'},
        {id:'003',name:'学生3'},
        {id:'004',name:'学生4'},
      ]
    }
  },
  // props:['name','age','sex'],// 简单接收
  // 接收的同时对数据进行类型限制
  // props:{
  //   name:String,
  //   age:Number,
  //   sex:String
  // }
  props:{
    name:{
      type:String,
      required:true
    },
    age:{
      type:Number,
      default:99
    },
    sex:{
      type:String,
      required: true
    }
  },
  // mixins:[mount],
  mounted() {
    this.$bus.$on('hello',data=>{
      console.log("我收到了数据,开自语  class组件",data)
    })
  },
  beforeRouteEnter(to,from,next){
    console.log('进入之前',{to,from,next})
    next();
  },
  beforeRouteLeave(to,from,next){
    console.log('离开之前',{to,from,next})
    next();
  },
  methods:{
    test(){

    }
  }
}
</script>

<style scoped lang="less">
#students{
  background: aqua;
  span{
     margin-top: 20px;
  }
}
</style>
